<template>
  <div class="container">
    <PcHeader></PcHeader>
    <img
      v-if="bannerImgList&&bannerImgList.length>0"
      class="banner-bg"
      :src="returnImg(bannerImgList[0].indexImg)"
      :alt="bannerImgList[0].indexTitle"
    >
    <div class="banner-title" v-if="bannerImgList&&bannerImgList.length>0">
      <h3>{{bannerImgList[0].indexTitle}}</h3>
      <p>{{bannerImgList[0].indexContent}}</p>
    </div>
    <div class="tab-box">
      <div class="tab-operation">
        <div class="tab-title">{{tradeName}}解决方案</div>
        <div class="tab-item" v-if="tabList&&tabList.length>0">
          <span
            v-for="(item,index) in tabList"
            :key="index"
            :class="activeIndex===index?'active':''"
            @click="scrollToPosition(item,index)"
          >{{item.indexTitle}}</span>
        </div>
      </div>
    </div>
    <!-- 产品概述 -->
    <div class="why-select-me about-model-us" v-if="productOverview && productOverview.length>0">
      <h3 class="title">{{productOverview[0].indexTitle}}</h3>
      <span class="index-model-line"></span>
      <div class="select-me-box">
        <img :src="returnImg(productOverview[0].indexImg)" :alt="productOverview[0].indexTitle">
        <div class="article-box">
          <!-- <h3 class="article-title">{{productOverview[0].indexName}}</h3> -->
          <p
            class="article-content"
            style="font-size: 0.182rem !important;"
            v-html="productOverview[0].indexContent"
          ></p>
        </div>
      </div>
    </div>
    <!-- 核心优势 -->
    <div class="comprehensive" v-if="coreAdvantage&&coreAdvantage.length>0">
      <h3 class="title">核心优势</h3>
      <span class="index-model-line"></span>
      <img :src="returnImg(coreAdvantage[0].indexImg)" :alt="coreAdvantage[0].indexTitle">
    </div>
    <div class="empowerYou">
      <h3 class="title">{{emPowerName}}</h3>
      <span class="index-model-line"></span>
      <ul class="select-me-box">
        <li class="select-me-item" v-for="(item,index) in empowerYou" :key="index">
          <img :src="returnImg(item.indexImg)" :alt="item.indexTitle">
          <h3>{{item.indexTitle}}</h3>
          <p>{{item.indexContent}}</p>
        </li>
      </ul>
    </div>
    <!-- <div class="customerCase">
      <h3 class="title">客户案例</h3>
      <span class="index-model-line"></span>
      <ul class="select-me-box" v-if="customerCase">
        <a class="showInfo" href="javascript:;" @click="showInfo">
          查看详情
          <el-icon>
            <Right/>
          </el-icon>
        </a>
        <li class="select-me-item">
          <img :src="returnImg(customerCase.indexImg)" :alt="customerCase.indexName">
          <div class="img-box">
            <img :src="returnImg(customerCase.indexTitle)" :alt="customerCase.indexTitle">
            <p>{{customerCase.indexContent}}</p>
          </div>
        </li>
      </ul>
    </div>-->
    <div
      v-if="partnersList.list && partnersList.list.length>0"
      class="cooperate index-model-bgimg"
      @mouseenter="clearTimer"
      @mouseleave="selectChangeAutoplay"
    >
      <h3 class="title">客户案例</h3>
      <span class="index-model-line"></span>
      <ul class="select-me-box">
        <li
          class="select-me-item"
          v-for="(item, index) in partnersList.list"
          :key="index"
          v-show="selectChangeIndex === index"
        >
          <span class="item-box" v-for="(items, indexs) in item.list" :key="indexs">
            <img :src="returnImg(items.indexTitle)" :alt="items.indexName">
          </span>
        </li>
      </ul>
      <ul class="select-change-box" v-if="partnersList.list && partnersList.list[0].list.length>13">
        <li
          class="select-change-item"
          v-for="(item, index) in partnersList.list"
          :key="index"
          :class="selectChangeIndex === index ? 'active' : ''"
          @click="handleChangeSelectBox(index)"
        ></li>
      </ul>
    </div>
    <div class="industryList" v-if="tradeList&&tradeList.length>0">
      <h3 class="title">行业解决方案</h3>
      <span class="index-model-line"></span>
      <ul class="select-me-box">
        <li
          class="select-me-item"
          v-for="(item,index) in tradeList"
          :key="index"
          @click="showMore(item)"
          :style="{'background':`url(${returnImg(item.indexImg)})`}"
          style="background-size: 100% 100%;background-repeat: no-repeat;"
        >
          <h3>{{item.indexTitle}}</h3>
          <p>{{item.indexContent}}</p>
          <a href="javascript:;">查看详情</a>
        </li>
      </ul>
    </div>
    <backTop/>
    <PcFooter></PcFooter>
  </div>
</template>
<script>
import PcHeader from "@/components/PcHeader/index.vue";
import PcFooter from "@/components/PcFooter/index.vue";
import backTop from "@/components/BackTop/index.vue";
import {
  menuGetModuleContent,
  getSolutionContent,
  getTradeStatus
} from "@/api/PC-Home";
export default {
  components: { PcHeader, PcFooter, backTop },
  metaInfo: {
    title: "领雁智远-智能时代的推动者",
    meta: [
      {
        name: "keywords",
        content: "智远"
      },
      {
        name: "description",
        content: "智远"
      }
    ]
  },
  computed: {},
  watch: {
    // $route: {
    //   deep: true,
    //   // immediate: true,
    //   handler(to, from) {
    //     console.log(to, from);
    //     if (to && from) {
    //       let toId = to.query.id;
    //       let toProductId = to.query.productId;
    //       let fromId = from.query.id;
    //       let fromProductId = from.query.productId;
    //       let toActiveIndex = Number(to.query.activeIndex);
    //       this.activeIndex = toProductId
    //         ? toActiveIndex
    //           ? toActiveIndex
    //           : 0
    //         : 0;
    //       if (toId !== fromId || toProductId !== fromProductId) {
    //         this.getTradeManagement();
    //       }
    //     }
    //   }
    // },
    $route(to, from) {
      let toId = to.query.id;
      let toProductId = to.query.productId;
      let fromId = from.query.id;
      let fromProductId = from.query.productId;
      let toActiveIndex = Number(to.query.activeIndex);
      this.activeIndex = toProductId ? (toActiveIndex ? toActiveIndex : 0) : 0;
      document.documentElement.scrollTop = 0;
      if (toId !== fromId || toProductId !== fromProductId) {
        this.getTradeManagement();
      }
    },
    tradeList: {
      deep: true,
      handler() {
        let arr = this.tradeList.filter(item => {
          return item.id === this.tradeId;
        });
        this.tradeName = arr.length > 0 ? arr[0].indexTitle : "";
      }
    }
  },
  data() {
    return {
      selectChangeIndex: 0,
      timer: null,
      certificationList: null,
      activeImg: "",
      bannerImgList: [],
      tabList: [],
      activeIndex: 0,
      aboutUs: null,
      enterpriseCulture: null,
      actionId: "",
      industryList: [],
      industryId: "",
      productOverview: [],
      nineAdvantages: [],
      schemeValue: [],
      tradeList: [],
      tradeId: "",
      coreAdvantage: [],
      empowerYou: [],
      customerCase: [],
      tradeName: "",
      partnersList: {},
      emPowerName:"智远如何为您赋能"
    };
  },
  mounted() {
    let toProductId = this.$route.query.productId;
    let toActiveIndex = Number(this.$route.query.activeIndex);
    this.activeIndex = toProductId ? (toActiveIndex ? toActiveIndex : 0) : 0;
    document.documentElement.scrollTop = 0;
    this.getTradeManagement();
    this.selectChangeAutoplay();
    // if (this.$route.query.id) {
    //   this.actionId = this.tabList[this.$route.query.actionId].id;
    //   this.activeIndex = this.$route.query.actionId;
    // }
  },
  methods: {
    handleChangeSelectBox(index) {
      this.selectChangeIndex = index;
    },
    scrollToPosition(item, index) {
      this.activeIndex = index;
      this.actionId = item.id;
      this.emPowerName = this.tabList[this.activeIndex].indexName
      this.getSolutionContent(this.tradeId + this.actionId);
    },
    returnImg(url) {
      if(url){
        return process.env.VUE_APP_URL + "/" + url;
      } 
    },
    handleChangeImg(item) {
      this.activeImg = item.indexImg;
    },
    getSolutionContent(val) {
      this.productOverview = null;
      let param = {
        parentId: val
      };
      getSolutionContent(param).then(res => {
        const data = res.data;
        this.bannerImgList = data[0].children;
        // 获取产品概述
        this.productOverview = data[1].children;
        // 核心优势
        this.coreAdvantage = data[2].children;
        // 如何赋能
        this.empowerYou = data[3].children;
        // 客户案例
        // this.customerCase = data[4].children[0];
        this.partnersList = data[4];
        this.partnersList.list = [];
        for (var i = 0; i < data[4].children.length; i += 15) {
          this.partnersList.list.push({
            id: data[4].children[i].id,
            list: data[4].children.slice(i, i + 15)
          });
        }
      });
    },
    // 获取行业
    getTradeManagement() {
      let param = {
        id: 201
      };
      menuGetModuleContent(param).then(res => {
        let queryId = this.$route.query.id;
        this.tradeList = res.data;
        this.tradeId = queryId ? queryId : res.data[0].id;
        this.getSolutionTab(this.tradeId);
      });
    },
    // 获取产品
    getSolutionTab(val) {
      let param = {
        id: val + "202"
      };
      getTradeStatus(param).then(res => {
        let queryId = this.$route.query.productId;
        this.tabList = res.data;
        this.emPowerName = this.tabList[this.activeIndex].indexName
        this.actionId = queryId ? queryId : res.data[0].id;
        this.getSolutionContent(this.tradeId + this.actionId);
      });
    },
    showMore(item) {
      // console.log(item.id,this.actionId)
      // this.tradeId = item.id;
      // delete this.$route.query.id;
      // this.getSolutionTab(this.tradeId);
      document.documentElement.scrollTop = 0;
      this.$router.push({
        path: "/solution",
        query: { id: item.id }
      });
      // 之前逻辑跳转
      // this.$router.push({
      //   path: "/solutionDetail",
      //   query: { id: item.id, actionId: this.actionId }
      // });
    },
    showInfo() {
      this.$router.push({
        path: "/customerCasePage",
        query: { id: this.tradeId + this.actionId }
      });
    },
    clearTimer() {
      if (this.timer) {
        clearInterval(this.timer);
      }
    },
    selectChangeAutoplay() {
      this.timer = setInterval(() => {
        this.selectChangeIndex++;
        if (this.selectChangeIndex >= this.partnersList.list.length) {
          this.selectChangeIndex = 0;
        }
      }, 3000);
    }
  }
};
</script>
<style scoped lang="scss">
.banner-bg {
  width: 100%;
  height: 4.8rem;
}
.banner-title {
  position: absolute;
  top: 2.194rem;
  left: 1.828rem;
  width: 6.651rem;
  text-align: left;
  h3 {
    font-size: 0.32rem;
    color: #ffffff;
    letter-spacing: 0;
    margin-bottom: 0.365rem;
  }
  p {
    font-size: 0.228rem;
    color: #ffffff;
    letter-spacing: 0;
    line-height: 0.457rem;
  }
}
.why-select-me {
  width: 100%;
  height: 6.285rem;
  display: flex;
  flex-direction: column;
  align-items: center;

  .select-me-box {
    width: 13.714rem;
    height: 2.628rem;
    margin-top: 0.64rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    img {
      width: 4.114rem;
      height: auto;
      margin-right: 0.32rem;
    }
    .article-box {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      .article-title {
        font-family: MicrosoftYaHei-Bold;
        font-size: 0.274rem;
        color: #323233;
        letter-spacing: 0;
        margin-bottom: 0.24rem;
      }
      .article-content {
        font-size: 0.182rem !important;
        color: #323233;
        letter-spacing: 0;
        line-height: 0.365rem;
        text-align: left;
        ::v-deep p {
          span {
            font-size: 0.182rem !important;
          }
        }
      }
    }
  }
}
.energize {
  width: 100%;
  height: 9.188rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f1f3f6;
  .select-me-box {
    width: 13.714rem;
    height: 1.828rem;
    margin-top: 0.64rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

    .select-me-item {
      width: 4.457rem;
      height: 100%;
      background: #ffffff;
      box-shadow: 0 8px 0.32rem 0 rgba(0, 17, 67, 0.05);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-bottom: 0.182rem;
      border-radius: 8px;
      padding: 0.342rem;
      box-sizing: border-box;
      &:hover {
        box-shadow: 0 0 10px rgba(0, 17, 67, 0.3);
      }
      .top-tiitle {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #e3e7ed;
        span {
          font-size: 0.32rem;
          color: #1790ff;
          line-height: 0.32rem;
          font-weight: bold;
        }
        h3 {
          font-size: 0.205rem;
          color: #323233;
          text-align: right;
          line-height: 0.205rem;
        }
      }

      p {
        width: 100%;
        font-size: 0.182rem;
        color: #909399;
        line-height: 0.297rem;
        text-align: left;
      }
    }
  }
}
.schemeValue {
  width: 100%;
  height: 7.828rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  .select-me-box {
    width: 13.714rem;
    height: 6.045rem;
    margin-top: 0.64rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background: #fff;
    img {
      width: 50.228rem;
      height: 4.57rem;
      margin-right: 0.32rem;
    }
    .article-box {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      .article-title {
        font-family: MicrosoftYaHei-Bold;
        font-size: 0.274rem;
        color: #323233;
        letter-spacing: 0;
        margin-bottom: 0.24rem;
      }
      .article-content {
        font-size: 0.182rem;
        color: #323233;
        letter-spacing: 0;
        line-height: 0.365rem;
        text-align: left;
      }
    }
  }
}
.industryList {
  width: 100%;
  height: 6.285rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  .select-me-box {
    width: 13.714rem;
    height: 2.285rem;
    margin-top: 0.64rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    .select-me-item {
      width: 3.29rem;
      height: 100%;
      // background: url("../../assets/img/bank-bg.png") no-repeat;
      background-size: contain;
      box-shadow: 0 8px 0.32rem 0 rgba(9, 52, 180, 0.05);
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: flex-start;
      margin-bottom: 0.182rem;
      margin-right: 0.182rem;
      border-radius: 8px;
      padding: 0.285rem;
      box-sizing: border-box;
      cursor: pointer;
      // &:nth-of-type(2) {
      //   background: url("../../assets/img/insurance.png") no-repeat;
      //   background-size: contain;
      // }
      // &:nth-of-type(3) {
      //   background: url("../../assets/img/security.png") no-repeat;
      //   background-size: contain;
      // }
      &:nth-of-type(4) {
        // background: url("../../assets/img/other.png") no-repeat;
        // background-size: contain;
        margin-right: 0px;
      }
      &:hover {
        box-shadow: 0 0 10px rgba(0, 17, 67, 0.3);
        // filter: blur(10px);//背景图模糊效果
        transform: scale(1.1); //默认缩放1.5倍
        // opacity: 0;//默认透明
        transition: all 0.5s; //动画时间
      }
      h3 {
        font-size: 0.274rem;
        color: #ffffff;
        line-height: 0.16rem;
        margin-bottom: 0.182rem;
        text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
      }
      p {
        font-size: 0.16rem;
        color: #ffffff;
        line-height: 0.228rem;
        text-align: left;
        // margin-bottom: 0.64rem;
        height: 0.914rem;
        text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
      }
      a {
        font-size: 0.16rem;
        color: #ffffff;
        line-height: 0.16rem;
        border-top: 1px solid #d8d8d8;
        padding-top: 0.137rem;
        box-sizing: border-box;
        text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
      }
    }
  }
}
// 核心优势
.comprehensive {
  width: 100%;
  height: 8.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(246, 250, 253, 1);
  img {
    width: 13.714rem;
    height: 5.714rem;
    margin-top: 0.64rem;
  }
}
// 如何赋能
.empowerYou {
  width: 100%;
  height: 7.725rem;
  display: flex;
  flex-direction: column;
  align-items: center;

  .select-me-box {
    width: 13.714rem;
    height: 4rem;
    margin-top: 0.64rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .select-me-item {
      width: 3.29rem;
      height: 100%;
      background: #f7f8fb;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 0 10px rgba(0, 17, 67, 0.1);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0.457rem 0.228rem;
      border: 1px solid rgba(227, 230, 237, 1);
      box-sizing: border-box;
      &:nth-of-type(4) {
        margin-right: 0;
      }
      &:hover {
        box-shadow: 0 0 10px rgba(0, 17, 67, 0.3);
        border: 1px solid #1790ff;
      }
      img {
        width: 0.457rem;
        height: 0.457rem;
      }
      h3 {
        font-size: 0.182rem;
        color: #323233;
        width: 100%;
        text-align: left;
        line-height: 0.32rem;
        margin-top: 0.274rem;
        text-align: center;
      }
      p {
        font-size: 0.182rem;
        color: #909399;
        letter-spacing: 0;
        // line-height: 36px;
        text-align: left;
        margin-top: 0.16rem;
        text-align: justify;
      }
    }
  }
}
// 客户案例
.customerCase {
  width: 100%;
  height: 7.108rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f1f3f6;
  .select-me-box {
    width: 13.714rem;
    height: 3.828rem;
    margin-top: 0.64rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: relative;
    .left {
      width: 0.457rem;
      height: 0.457rem;
      text-align: center;
      position: absolute;
      top: 0.342rem;
      right: 1.028rem;
      border: 1px solid #efefef;
      border-radius: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .right {
      width: 0.457rem;
      height: 0.457rem;
      text-align: center;
      position: absolute;
      top: 0.342rem;
      right: 0.342rem;
      border: 1px solid #efefef;
      border-radius: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .select-me-item {
      width: 100%;
      height: 100%;
      background: #ffffff;
      box-shadow: 0 8px 0.32rem 0 rgba(0, 17, 67, 0.1);
      border-radius: 8px;
      overflow: hidden;
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 0.182rem;
      box-sizing: border-box;
      &:hover {
        box-shadow: 0 0 10px rgba(0, 17, 67, 0.3);
        // border: 1px solid #1790ff;
        box-sizing: border-box;
      }
      img {
        width: 2.742rem;
        height: 3.017rem;
        margin-right: 0.64rem;
      }
      .img-box {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex: 1;
        height: 100%;
        img {
          width: 1.828rem;
          height: 0.457rem;
          margin-top: 0.228rem;
        }
        p {
          font-size: 0.16rem;
          color: #323233;
          letter-spacing: 0;
          text-align: justify;
          line-height: 0.32rem;
          margin-top: 0.274rem;
        }
      }
    }
  }
}
// 新客户案例
.cooperate {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;

  .select-me-box {
    width: 13.714rem;
    height: auto;
    margin-top: 0.64rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    .select-me-item {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

      .item-box {
        width: 2.422rem;
        height: 0.822rem;
        background: #ffffff;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        display: flex;
        align-items: center;
        padding: 0 0.228rem;
        box-sizing: border-box;
        margin-right: 0.4rem;
        margin-bottom: 0.4rem;
        &:nth-child(5n) {
          margin-right: 0;
        }

        img {
          width: 100%;
          height: auto;
        }
      }
    }
  }

  .select-change-box {
    display: flex;
    width: auto;
    height: auto;
    margin-top: 0.548rem;
    margin-bottom: 0.548rem;

    .select-change-item {
      width: 0.457rem;
      height: 4px;
      background: rgba(23, 144, 255, 0.2);
      border-radius: 2px;
      margin-right: 8px;
      cursor: pointer;

      &.active {
        background: rgba(23, 144, 255, 1);
      }

      &:hover {
        background: rgba(23, 144, 255, 1);
      }
    }
  }
}
.title {
  width: 13.714rem;
  font-size: 0.457rem;
  color: #323233;
  letter-spacing: 0;
  text-align: center;
  margin-top: 1.097rem;
  position: relative;
}
.details {
  font-size: 0.16rem;
  color: #1790ff;
  letter-spacing: 0;
  line-height: 0.365rem;
}
.showMore {
  font-size: 0.182rem;
  color: #909399;
  letter-spacing: 0;
  line-height: 0.205rem;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  .el-icon {
    margin-left: 8px;
  }
}
.showInfo {
  position: absolute;
  top: 0.57rem;
  right: 0.228rem;
  font-size: 0.16rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(106, 119, 114, 1);
  &:hover {
    color: #1790ff;
  }
  i {
    margin-left: 10px;
  }
}
.tab-box {
  width: 100%;
  height: 0.685rem;
  background: #f1f4f8;
  .tab-operation {
    width: 13.714rem;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    .tab-title {
      padding-right: 0.182rem;
      font-family: MicrosoftYaHei-Bold;
      font-size: 0.16rem;
      color: #323233;
      letter-spacing: 0;
      position: relative;
      font-weight: bold;
      &::after {
        content: "";
        position: absolute;
        width: 2px;
        height: 8px;
        background: #cad6ec;
        right: 0;
        top: 6px;
      }
    }
    .tab-item {
      margin-left: 0.182rem;
      display: flex;
      span {
        margin-right: 0.457rem;
        font-family: MicrosoftYaHei;
        font-size: 0.16rem;
        color: #323233;
        letter-spacing: 0;
        cursor: pointer;
        &.active {
          color: #1790ff;
        }
      }
    }
  }
}
@media only screen and (max-device-width: 768px) {
  .banner-bg {
    height: auto;
    top: 10.457rem;
  }
  .banner-title {
    width: 92%;
    top: 2rem;
    left: 0.228rem;
    padding: 0 0.228rem;
    box-sizing: border-box;
    h3 {
      font-size: 0.342rem;
      margin-bottom: 0.17rem;
    }
    p {
      line-height: 0.3rem;
    }
  }
  .tab-box {
    width: 100%;
    height: 1rem;
    padding: 0 0.228rem;
    box-sizing: border-box;
    overflow-x: auto;
    .tab-operation {
      width: 100%;
      height: 100%;
      margin: 0 auto;
      display: flex;
      flex-direction: row;
      align-items: center;
      .tab-item {
        span {
          display: inline-block;
        }
      }
    }
  }
  .why-select-me {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 1rem;
    .select-me-box {
      width: 100%;
      height: auto;
      margin-top: 0.64rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      padding: 0 0.228rem;
      box-sizing: border-box;
      img {
        width: 5rem;
        height: 100%;
        margin-bottom: 0.5rem;
        margin-right: 0.32rem;
      }
      .article-box {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        .article-title {
          font-family: MicrosoftYaHei-Bold;
          font-size: 0.274rem;
          color: #323233;
          letter-spacing: 0;
          margin-bottom: 0.24rem;
        }
        .article-content {
          font-size: 0.182rem;
          color: #323233;
          letter-spacing: 0;
          ::v-deep p {
            span {
              font-size: 0.182rem !important;
            }
          }
        }
      }
    }
  }
  .energize {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f1f3f6;
    .select-me-box {
      width: 100%;
      height: auto;
      margin-top: 0.64rem;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      padding: 0 0.228rem;
      box-sizing: border-box;
      .select-me-item {
        width: 4.457rem;
        height: 1.828rem;
        background: #ffffff;
        box-shadow: 0 8px 0.32rem 0 rgba(0, 17, 67, 0.05);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 0.182rem;
        border-radius: 8px;
        padding: 0.342rem;
        box-sizing: border-box;
        &:hover {
          box-shadow: 0 0 10px rgba(0, 17, 67, 0.3);
        }
        .top-tiitle {
          width: 100%;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          border-bottom: 1px solid #e3e7ed;
          span {
            font-size: 0.32rem;
            color: #1790ff;
            line-height: 0.32rem;
            font-weight: bold;
          }
          h3 {
            font-size: 0.205rem;
            color: #323233;
            text-align: right;
            line-height: 0.205rem;
          }
        }

        p {
          width: 100%;
          font-size: 0.182rem;
          color: #909399;
          line-height: 0.297rem;
          text-align: left;
        }
      }
    }
  }
  .schemeValue {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;

    .select-me-box {
      width: 100%;
      height: auto;
      margin-top: 0.64rem;
      flex-direction: column;
      padding: 0 0.228rem;
      box-sizing: border-box;
      img {
        width: 100%;
        height: 4.57rem;
        margin-right: 0.32rem;
      }
      .article-box {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        .article-title {
          font-family: MicrosoftYaHei-Bold;
          font-size: 0.274rem;
          color: #323233;
          letter-spacing: 0;
          margin-bottom: 0.24rem;
        }
        .article-content {
          font-size: 0.182rem;
          color: #323233;
          letter-spacing: 0;
          line-height: 0.365rem;
          text-align: left;
        }
      }
    }
  }
  .industryList {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f1f3f6;
    .select-me-box {
      width: 100%;
      height: auto;
      margin-top: 0.64rem;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 0.57rem;
      padding: 0 0.228rem;
      box-sizing: border-box;
      .select-me-item {
        width: 48%;
        height: 100%;
        background: url("../../assets/img/bank-bg.png") no-repeat;
        background-size: 100%;
        box-shadow: 0 8px 0.32rem 0 rgba(9, 52, 180, 0.05);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        margin-bottom: 0.182rem;
        margin-right: 0;
        border-radius: 8px;
        padding: 0.274rem;
        box-sizing: border-box;
        cursor: pointer;
        &:nth-of-type(2) {
          background: url("../../assets/img/insurance.png") no-repeat;
          background-size: 100%;
        }
        &:nth-of-type(3) {
          background: url("../../assets/img/security.png") no-repeat;
          background-size: 100%;
        }
        &:nth-of-type(4) {
          background: url("../../assets/img/other.png") no-repeat;
          background-size: 100%;
          margin-right: 0px;
        }
        &:hover {
          box-shadow: 0 0 10px rgba(0, 17, 67, 0.3);
        }
        h3 {
          font-size: 0.274rem;
          color: #ffffff;
          line-height: 14px;
          margin-bottom: 16px;
        }
        p {
          font-size: 0.16rem;
          color: #ffffff;
          line-height: 0.228rem;
          text-align: left;
          margin-bottom: 0.64rem;
        }
        a {
          font-size: 0.16rem;
          color: #ffffff;
          line-height: 0.16rem;
          border-top: 1px solid #d8d8d8;
          padding-top: 0.137rem;
          box-sizing: border-box;
        }
      }
    }
  }
  // 核心优势
  .comprehensive {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0.228rem;
    box-sizing: border-box;
    img {
      width: 100%;
      height: auto;
      margin-top: 0.64rem;
    }
  }
  // 赋能
  .empowerYou {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;

    .select-me-box {
      width: 100%;
      height: auto;
      margin-top: 0.64rem;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 0 0.228rem;
      box-sizing: border-box;
      flex-wrap: wrap;
      margin-bottom: 10px;
      .select-me-item {
        width: 48%;
        height: 4rem;
        margin-bottom: 0.228rem;
        box-shadow: none;
        img {
          width: 1rem;
          height: auto;
        }
      }
    }
  }
  // 客户案例
  .customerCase {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    .select-me-box {
      width: 100%;
      height: auto;
      margin-top: 0.64rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      position: relative;
      .showInfo {
        right: 1rem;
      }
      .left {
        width: 0.457rem;
        height: 0.457rem;
        text-align: center;
        position: absolute;
        top: 0.342rem;
        right: 1.028rem;
        border: 1px solid #efefef;
        border-radius: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
      .right {
        width: 0.457rem;
        height: 0.457rem;
        text-align: center;
        position: absolute;
        top: 0.342rem;
        right: 0.342rem;
        border: 1px solid #efefef;
        border-radius: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
      .select-me-item {
        width: 100%;
        height: 100%;
        background: #ffffff;
        box-shadow: 0 8px 0.32rem 0 rgba(0, 17, 67, 0.1);
        border-radius: 8px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0.182rem;
        box-sizing: border-box;
        &:hover {
          box-shadow: 0 0 10px rgba(0, 17, 67, 0.3);
          // border: 1px solid #1790ff;
          box-sizing: border-box;
        }
        img {
          width: 100%;
          height: 4rem;
          margin-right: 0;
        }
        .img-box {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          flex: 1;
          height: 100%;
          img {
            width: 2.828rem;
            height: auto;
            margin-top: 0.228rem;
          }
          p {
            font-size: 0.16rem;
            color: #323233;
            letter-spacing: 0;
            text-align: justify;
            margin-top: 0.274rem;
          }
        }
      }
    }
  }
  // 客户案例
  .cooperate {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;

    .select-me-box {
      width: 100%;
      height: auto;
      margin-top: 0.64rem;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 0 0.228rem;
      box-sizing: border-box;
      .select-me-item {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        .item-box {
          width: 48%;
          height: 1rem;
          margin-bottom: 0.128rem;
          margin-right: 0;
        }
      }
    }

    .select-change-box {
      margin-bottom: 0.548rem;
    }
  }
  .title {
    width: 100%;
    font-size: 0.457rem;
  }
}
</style>